<template>
	<!-- 头部部分 -->
	<header class="header">
		<h1>todos</h1>
		<input
			class="new-todo"
			placeholder="请输入任务名称"
			autofocus
			v-model.trim="name"
			@keyup.enter="submit(name)"
		/>
	</header>
</template>

<script>
export default {
	name: 'TodoHeader',
	data() {
		return {
			name: '',
		}
	},
	methods: {
		submit(name) {
			if (!this.name) return alert('输入不能为空')
			this.$store.dispatch('ADDTODOS', {
				id: Date.now(),
				name,
				isDone: false,
			})
			this.name = ''
		},
	},
}
</script>

<style></style>
